<template>
  <div class="mb22">
    <el-form
      :class="{'mobile-el-form': showMobilePage}"
      :label-position="showMobilePage?'left':'right'"
      label-width="110px"
      class="price-form height55">
      <el-row :gutter="20" :class="{'dividing': !showMobilePage}">
        <el-col v-for="item in dataList" :span="span" :key="item.parentKey + item.keyword">
          <el-form-item :label="`${item.name}:`" :class="{ 'indentation-form-item': item.indentLabel }">
            <ToolTip v-if="data.additionalKey" :content="item.parentKey ? data.additionalKey[item.parentKey][item.keyword] : data.additionalKey[item.keyword]"/>
            <span v-else>--</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { getFields } from '../data';
import { mapState } from 'vuex';
export default {
  props: {
    data: {
      type: Object,
      default: () => ({})
    },
    span: {
      type: Number,
      default: 8
    }
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    }),
    dataList() {
      return getFields(this.data.platformName);
    }
  }
};
</script>

<style lang="scss" scoped>
.mb22 {
  margin-bottom: 22px;
}
</style>
